<template>
	 <el-dialog
	    v-model="state.forgetPasswordDialog"
	    title="忘记密码"
	    width="30%"
	  >
		<el-form class="login-form" label-position="top" :rules="rules"> 
			<el-form-item label="请输入您的注册账号" prop="account">
				<el-input v-model="forgetData.account" placeholder="请输入您的注册账号"/>
			</el-form-item>
			<el-form-item label="请输入您的注册邮箱" prop="email">
				<el-input v-model="forgetData.email" placeholder="请输入您的注册邮箱"/>
			</el-form-item>	
		</el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="state.forgetPasswordDialog = false">取消</el-button>
		    <el-button type="primary" @click="openChangePassword">
		      下一步
		    </el-button>
		  </div>
		</template>
	  </el-dialog>
	  <!-- 修改密码 -->
	  <el-dialog
	     v-model="state.changePasswordDialog"
	     title="修改密码"
	     width="30%"
	   >
	  		<el-form class="login-form" label-position="top" :rules="rules"> 
	  			<el-form-item label="请输入您的密码" prop="password">
	  				<el-input v-model="forgetData.password" placeholder="请输入您的新密码"/>
	  			</el-form-item>
	  			<el-form-item label="再次确认您的新密码" prop="repassword">
	  				<el-input v-model="forgetData.repassword" placeholder="再次确认您的新密码"/>
	  			</el-form-item>	
	  		</el-form>
	  		<template #footer>
	  		  <div class="dialog-footer">
	  		    <el-button @click="state.changePasswordDialog = false">取消</el-button>
	  		    <el-button type="primary" @click="state.changePasswordDialog = false">
	  		      确认
	  		    </el-button>
	  		  </div>
	  		</template>
	   </el-dialog>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue'
	declare interface forgetData {
		account: number;
		email: string;
		password: string;
		repassword: string;
	}
	const forgetData = reactive({
		account: null,
		email: '',
		password: '',
		repassword: '',
	})
	const rules = reactive({
	  account: [
	    { required: true, message: '请输入您的注册账号', trigger: 'blur' },
	  ],
	  email: [
	    { required: true, message: '请输入您的注册邮箱', trigger: 'blur' },
	  ],
	  password: [
	    { required: true, message: '请输入您想修改的密码', trigger: 'blur' },
	  ],
	  repassword: [
	    { required: true, message: '再次确认您的新密码', trigger: 'blur' },
	  ],
	})	
	const state = reactive({
		forgetPasswordDialog: false
	})
	
	const open = () => {
		state.forgetPasswordDialog = true
	}
	const openChangePassword = () => {
		state.forgetPasswordDialog = false
		state.changePasswordDialog = true
	}
	defineExpose({
		open
	})
	
</script>

<style lang="scss" scoped>
</style>